<template>
  <!-- <div>
     <el-descriptions
     
 
    :column="column"
     
    border
  >
  <template #title>
      <slot name="title">
        <div class="lineTitle">
            {{
              title
            }}
        </div>
        
      </slot>
    </template>
    <template #extra>
      <slot name="extra">
       
        
      </slot>
    </template>
    <el-descriptions-item 
    v-for="(item,index) in columns" :key="index"
    :span="item.span"
    >
      <template #label>
       <span>{{item.label}}</span>
      </template>
       <span v-if="item.type=='price'">￥ {{itemLabel(data[item.prop],item.valueKey) }}</span>
       <span v-if="item.type=='image'">
         <el-image></el-image>
       </span>
        <span v-else>{{itemLabel(data[item.prop],item.valueKey) }}</span>
    </el-descriptions-item>
   
  </el-descriptions>
  </div> -->
  <div class="detail__wrap">
    <div class="detail__wrap--header" @click="toggleClick">
      <div class="lineTitle">
        <div v-if="title">
          {{ title }}
          <el-tooltip
            v-if="message"
            effect="dark"
            :content="message"
            placement="right"
          >
            <i class="el-icon-warning-outline" />
          </el-tooltip>
        </div>
      </div>
      <i
        v-if="collapsed"
        :class="[
          'el-icon-arrow-down',
          { 'el-icon-arrow-down-transform': !show },
        ]"
      />
      <div v-else>
        <slot name="toolbar"></slot>
      </div>
    </div>
    <el-collapse-transition>
      <div v-show="show" class="detail__content" :style="contentStyleObj">
        <slot name="content">
          <el-row type="flex">
            <el-col
              v-for="(item, $index) in schema"
              :key="$index"
              :span="item.span || 12"
            >
              <div
                class="detail__content--item"
                :class="{ 'detail__content--flex': !vertical }"
              >
                <div class="content__item--label" :style="labelStyleObj">
                  <slot :name="item.prop" :row="item">
                    {{ item.label }}
                  </slot>
                </div>
                <div class="content__item--message" :style="messageStyleObj">
                  <slot :name="`${item.prop}Content`" :row="data">
                    <span v-if="item.type == 'price'"
                      >￥ {{ itemLabel(data[item.prop], item.valueKey) }}</span
                    >
                    <span v-if="item.type == 'image'">
                      <ImagePreview data1="12" :src="data[item.prop]"></ImagePreview>
                    </span>
                    <span v-else>{{
                      itemLabel(data[item.prop], item.valueKey)
                    }}</span>
                  </slot>
                </div>
              </div>
            </el-col>
          </el-row>
        </slot>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, defineEmits, onMounted, PropType, computed } from "vue";
import { itemLabel } from "/@ts/hooks/format";
import ImagePreview from "/@/components/ImagePreview/index.vue";
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/

const state = reactive({});

const props: any = defineProps({
  // 详情标题
  title: {
    type: String as PropType<string>,
    default: "基本信息",
  },
  // 是否可折叠
  collapsed: {
    type: Boolean as PropType<boolean>,
    default: true,
  },
  // 辅助提示
  message: {
    type: String as PropType<string>,
    default: "",
  },
  // 是否需要边框
  border: {
    type: Boolean as PropType<boolean>,
    default: true,
  },
  // 需要展示的数据
  data: {
    type: Object as PropType<object>,
    required: true,
  },
  // 布局展示的数据
  schema: {
    type: Array as PropType<any[]>,
    required: true,
  },
  // 是否标题和内容各占一行 垂直布局
  vertical: {
    type: Boolean as PropType<boolean>,
    default: false,
  },
  // 标题宽度
  labelWidth: {
    type: String as PropType<string>,
    default: "150px",
  },
  // 标题位置
  labelAlign: {
    type: String as PropType<string>,
    default: "left",
  },
  // 边框颜色
  borderColor: {
    type: String as PropType<string>,
    default: "#f0f0f0",
  },
  // 标题背景颜色
  labelBg: {
    type: String as PropType<string>,
    default: "#fafafa",
  },
  //  data: {
  //     //表格数据
  //     type: Object,
  //     default: null,
  //   },
  //    column:{
  //     //列数
  //     type: Number,
  //     default: 2,
  //    },
  //   columns: {
  //     //列数据
  //     type: Array,
  //     default: [],
  //   },
  //   title:{
  //     type: String,
  //     default: '基本信息',
  //   }
});
const show = ref<boolean>(true);

const contentStyleObj = computed(() => {
  return {
    borderTop: props.border ? `1px solid ${props.borderColor}` : "",
    borderLeft: props.border ? `1px solid ${props.borderColor}` : "",
  };
});

const labelStyleObj = computed(() => {
  return {
    width: props.vertical ? `calc(100% - 33px)` : props.labelWidth,
    textAlign: props.labelAlign,
    backgroundColor: props.border ? props.labelBg : "",
    borderRight: props.border ? `1px solid ${props.borderColor}` : "",
    borderBottom: props.border ? `1px solid ${props.borderColor}` : "",
  };
});

const messageStyleObj = computed(() => {
  return {
    width: props.vertical ? `calc(100% - 33px)` : "100%",
    borderRight: props.border ? `1px solid ${props.borderColor}` : "",
    borderBottom: props.border ? `1px solid ${props.borderColor}` : "",
  };
});

function toggleClick() {
  if (props.collapsed) {
    show.value = !show.value;
  }
}
</script>

<style scoped lang="scss">
.detail__wrap {
  // background: var(--geeker-bg-color);
  border-radius: 2px;
  padding: 10px;
  .detail__wrap--header {
    display: flex;
    height: 32px;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    .detail__wrap--title {
      display: inline-block;
      font-size: 18px;
      font-weight: 700;
      //color: rgba(0, 0, 0, 0.85);
      position: relative;
      margin-left: 10px;
      &:after {
        content: "";
        width: 3px;
        height: 100%;
        background: #2d8cf0;
        border-radius: 2px;
        position: absolute;
        top: 1px;
        left: -10px;
      }
    }
    .el-icon-arrow-down {
      transition: all 0.2s;
    }
    .el-icon-arrow-down-transform {
      transform: rotate(-180deg);
    }
  }
  .detail__content {
    :deep .el-row {
      flex-wrap: wrap;
    }
    .detail__content--flex {
      display: flex;
      height: 100%;
    }
    .content__item--label {
      font-size: 14px;
      padding: 8px 16px;
    }
    .content__item--message {
      flex: 1;
      font-size: 14px;
      padding: 8px 16px;
      line-height: 20px;
      color: #606266;
    }
  }
}
</style>
